File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="w1400 header-wrap">
<div class="logo">
<router-link to="/"><span>AI 디지털교과서 통합지원센터</span></router-link>
</div>
<header>
<nav>
<ul class="clearfix">
<li @mouseenter="toggleSubMenu" @mouseleave="toggleSubMenu">통합지원센터 소개
<ul v-if="showSubMenu">
<li>통합지원센터란?</li>
<li>협력 기업</li>
</ul>
</li>
<!-- Add more menu items here -->
</ul>
<ul class="clearfix">
<li @mouseenter="expandHeader" @mouseleave="collapseHeader">자료실
<ul>
<li>기술문서</li>
<li>자료집</li>
</ul>
</li>
<!-- Add more menu items here -->
</ul>
<ul class="clearfix">
<li @mouseenter="expandHeader" @mouseleave="collapseHeader">내트워킹
<ul>
<li>기업 홍보관</li>
</ul>
</li>
<!-- Add more menu items here -->
</ul>
<ul class="clearfix">
<li @mouseenter="expandHeader" @mouseleave="collapseHeader">커뮤니티
<ul>
<li>공지사항</li>
<li>홍보/뉴스</li>
</ul>
</li>
<!-- Add more menu items here -->
</ul>
<ul class="clearfix">
<li @mouseenter="expandHeader" @mouseleave="collapseHeader">마이페이지
<ul>
<li>내 정보 수정</li>
<li>매칭 관리</li>
</ul>
</li>
<!-- Add more menu items here -->
</ul>
</nav>
</header>
</div>
</template>
<script>
export default {
data() {
return {
showSubMenu: false,
}
},
methods: {
toggleSubMenu() {
this.showSubMenu = !this.showSubMenu;
},
},
watch: {
},
computed: {
},
mounted() {
console.log('Menu mounted');
}
}
</script>
<style scoped>
.sub-menu {
width: 100%;
}
header {
display: flex
}
/* 폰트 적용 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html {
font-family: "Noto Sans KR", sans-serif;
}
/* 노말라이즈 */
body,
ul,
li,
h1 {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
/* 라이브러리 */
.con {
margin: 0 auto;
}
.img-box>img {
width: 100%;
display: block;
}
.row::after {
content: "";
display: block;
clear: both;
}
.cell {
float: left;
box-sizing: border-box;
}
.cell-right {
float: right;
box-sizing: border-box;
}
.margin-0-auto {
margin: 0 auto;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.text-align-center {
text-align: center;
}
.line-height-0-ch-only {
line-height: 0;
}
.line-height-0-ch-only>* {
line-height: normal;
}
.relative {
position: relative;
}
.absolute-left {
position: absolute;
left: 0;
}
.absolute-right {
position: absolute;
right: 0;
}
.absolute-middle {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.width-100p {
width: 100%;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
}
.vertical-align-top {
vertical-align: top;
}
.vertical-align-middle {
vertical-align: middle;
}
.vertical-align-bottom {
vertical-align: bottom;
}
/* 커스텀 */
.con {
width: 1180px;
}
.con-min-width {
min-width: 1180px;
}
/* 반응형 레이아웃 */
/*
.con {
max-width:1150px;
}
.con-min-width {
min-width:320px;
}
html, body {
overflow-x:hidden;
}
*/
body {
background: rgb(255, 255, 255);
}
header {
/* border: 1px solid red; */
/* background: -webkit-linear-gradient(rgb(255, 255, 255) 50px, rgb(255, 255, 255) 50px); */
transition: 0.3s ease-in;
height: 50px;
/* overflow: hidden; */
}
nav {
width: 960px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
nav>ul>li {
display: inline-block;
/* float: lef/t; */
right: 0;
line-height: 50px;
margin-left: 40px;
font-size: 1.4rem;
/* position: relative; */
font-family: "Pretendard-Regular";
}
nav>ul>li ul {
width: 100%;
opacity: 0;
position: absolute;
transition: 0.3s 0.2s;
}
nav>ul>li ul li {
white-space: nowrap;
}
nav>ul>li:hover ul {
opacity: 1;
transition: 0.3s 0.2s;
z-index: 1;
background-color: white;
}
</style>